<template>
    <div class="userInfo">
      <el-avatar icon="el-icon-user-solid" fit="fill" :src="userInfo.avatar"></el-avatar>
      <span class="userName" :title="userInfo.name">
          {{userInfo.name}}
      </span>
    </div>
</template>
<script>

import {getUserInfo} from '@/utils/user';
export default {
    data() {
        return {
        }
    },
    computed: {
        userInfo:function() {
          let info  = getUserInfo();
          return info;
        }
    },
  methods: {
  }
}
</script>

<style lang="less"  scoped>
  .userInfo {
    color: #323232;
    padding: 0 24px;
    text-align:center;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .el-avatar {
      margin-right: 8px;
      width:24px;
      height:24px;
    }
  }

 /deep/ .el-avatar--circle {
     background: #A0BEE8;
     color: #4F76AC!important;
     display: flex;
     align-items: center;
     justify-content: center;
 }
</style>
